<template>
  <div>
    <div ref="barrage" class="barrage">
      <div v-for="item in words" :value="item" :key="item">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'barrage',
  data () {
    return {
      timer: null,
      current: [],
      newarr: [],
      flag: 0,
      num: [],
      words: [this.text]
    }
  },
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  watch: {
    text () {
      this.words.splice(this.words.length, 1, this.text)
    }
  },
  mounted () {
    console.log(this.words)
    for (let i = 0; i < this.$refs.barrage.offsetHeight / 20 - 1; i++) {
      this.num.splice(i, 0, i)// 将整个显示框划分成多个块，并对每个块进行标号
    }
    clearInterval(this.timer)
    this.timer = setInterval(this.move, 20) // 开启定时器
  },
  methods: {
    random (m, n) { // 随机在m、n之间的整数
      return Math.round(Math.random() * (n - m)) + m
    },
    move () {
      let arr = this.$refs.barrage.children// 获取所有的弹幕
      for (let i = 0; i < arr.length; i++) {
        this.newarr.push(arr[i].offsetLeft)// 将每个弹幕距左边边框的距离分别存储在newarr数组中
        arr[i].style.left = this.newarr[i] + 'px'// 更新距离
        this.newarr[i] = this.newarr[i] - 2// 每次减少2px
        if (this.newarr[i] < 0) {
          // console.log(arr[i].innerHTML)
          if (this.currentTest(arr[i].innerHTML) && this.flag !== 0) {
            // 当是从输入框发送的弹幕时而且是第一次时,将内容添加到预备的词库中，并删除这个div元素。这么做是为了将弹幕数量维持在一定数量，防止在输入框发送大量弹幕，导致出现错误。
            // console.log(current)
            this.words.push(arr[i].innerHTML)
            this.$refs.barrage.removeChild(arr[i])
            this.newarr.splice(i, 1)// 在newarr中删除这个div
            this.flag--
          } else {
            // 当弹幕到达最左边时，弹幕内容再次随机，同时，将这个块加入到预选块中，并在预选块中随机再选一个，颜色也再次随机，这样就保持块的数量不变。
            this.newarr[i] = 800
            // console.log(parseInt(arr[i].style.top))
            // console.log(arr[i].style.top/20)
            arr[i].innerHTML = this.words[this.random(0, this.words.length - 1)]
            this.num.splice(this.num.length, 0, parseInt(arr[i].style.top) / 20)
            let t = this.random(0, this.num.length)
            arr[i].style.top = this.num[t] * 20 + 'px'
            this.Delete(this.num[t])
            // console.log(num)
            // console.log(node.style.top);
            arr[i].style.left = '800px'
            arr[i].style.color = '#' + this.randomColor()
          }
        }
      }
    },
    currentTest (m) {
      let fl = false
      for (let i = 0; i < this.current.length; i++) {
        if (this.current[i] === m) {
          // console.log(m)
          this.current.splice(i, 1)
          fl = true
        }
      }
      return fl
    },
    Delete (m) {
      // 从预选块中删除已被选择的块
      for (let i = 0; i < this.num.length; i++) {
        if (this.num[i] === m) {
          // console.log(m)
          this.num.splice(i, 1)
        }
      }
    },
    randomColor () {
      // 随机颜色
      let color = Math.ceil(Math.random() * 16777215).toString(16)
      while (color.length < 6) {
        color = '0' + color
      }
      return color
    }
  }
}
</script>

<style scoped>
  .barrage {
    margin: auto;
    margin-top: 50px;
    position: relative;
    width: 800px;
    height: 400px;
    background: rgba(0,0,0,0);
    border: 0;
  }
  .barrage div {
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
  }
</style>
